<template>
    <div class="page">
        <p class="prev page_item" v-show="showPrev" @click="handlePrev">
            <ArrowIcon class="page_icon" />
            上一页
        </p>
        <p class="next page_item" v-show="nextPrev" @click="handleNext">
            下一页
            <ArrowIcon class="page_icon" />
        </p>
    </div>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted } from 'vue';
import ArrowIcon from '../icons/arrowIcon.vue';

interface pagingType {
    total: any,
    pageNum: number
    pagesize: number
}

const props = defineProps<pagingType>()

const pageCount = ref();
const pageTotal = ref();
const showPrev = ref(true)
const nextPrev = ref(true)

watch(props, () => {
    pageCount.value = props.pageNum;
    pageTotal.value = pagerCount(props.total, props.pagesize);
    showButton();
})


const emit = defineEmits<{
    (e: "currenthange", value: number): void;
}>();

function pagerCount(total: number, pageSize: number) {
    return Math.ceil(total / pageSize)
}


function handlePrev() {
    if (pageTotal.value > 1) {
        pageCount.value--;
        showButton();

    }
}

function handleNext() {
    if (pageTotal.value > pageCount.value) {
        pageCount.value++;
        showButton();
    }

}


function showButton() {
    if (pageCount.value == pageTotal.value) {
        nextPrev.value = false
    } else {
        nextPrev.value = true;
    }
    if (pageCount.value == 1) {
        showPrev.value = false
    } else {
        showPrev.value = true
    }

}

watch(pageCount, () => {
    emit('currenthange', pageCount.value);
})


</script>

<style lang="less" scoped>
.page {
    padding: 0 20px;
    overflow: hidden;

    .page_item {
        display: flex;
        font-size: 14px;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        .page_icon {
            width: 15px;
        }
    }

    .prev {
        float: left;

        .page_icon {
            transform: rotateZ(180deg) translateY(-0.5px);
        }
    }

    .next {
        float: right;
    }
}
</style>